Full Screen Background Image with HTML CSS | Responsive Full Page Background Image CSS

[@dejihassan5573]

never seen a video so short,concise and straight to the point like this ever .Thank You!!

[@bopatzable]

fully agree. this video is really helpful.

[@raves_r3177]

I dont usually leave a comment but I feel like I have to in this video because you have helped me a lot. I have a web design project due a few days from now but I have no idea how to do a full screen image. You sir, just saved my grade. Thank you very much for this video and for the patience of explaining what a "vh" is. Your quality of teaching and content is worth a million subs. Again, thank you very much. Subscribed.

[@cemeygimedia]

Glad I could help! Thank you for your nice thoughts 👍

[@worldlyjourney]

You are right. After watching this video, I decided to watch another video from a different RUclipsr to compare the. Explanation. But I came back to this account to watch all his videos. You explain things in a simple and meaningful way. It Is hard for me to leave a comment but today I did

[@nataliestepp5916]

I've been struggling for 2 hours trying to research how to do this! Thank you so much for posting this!

[@LisekGG]

Pro tip: If you want the image to be centered vertically and horizontally add line: *background-position: center center;*

[@memylaptopandblitz7338]

cheers buddy thx 4 that

[@jirehcruz196]

omg thank uuuu

[@LisekGG]

You're welcome :D

[@codesaif8075]

thanks dude you saved me

[@LisekGG]

@@codesaif8075 Happy to help 😅

[@Disciple1963]

As a non-native English speaker I'd like to point out your great English pronunciation and thanks a million for it!
And also thanks a lot for extremily clear explanation of the subject!
Like and subscribe!

[@clauclaudia6855]

Wowww, thanks a lot , I had around 5h watching videos and I didn't manage to change the size of the img, and with 5 min your video I manage to do it XD, great explanation!!

[@thebrainykids]

Exceptional Turkish accent. Lovely. Thanks for this !!!

[@Memes4eva_4u]

the other vids had repeating background. THIS IS PERFECT! tysm!

[@seandorig1955]

Thank me later! (I know is pissing when someone doesnt put the code in description so i made here just copy it :D )
{
margin: 0;
padding: 0;
}
.background-image {
background-image: "source";
background-size: cover;
background-repeat: no-repeat;
width: 200px;
height: 100vh;
}

[@S_K_Michael1]

Take the width out please

[@leahlilyrose]

Omg THANK YOU SO MUCH MAN! I have a project and the background image was irritating me 😭 you are a life saver, you earned a sub!

[@feality8697]

This guy is the key! This is what I was looking for! straight to the point

[@thebrainykids]

absolutely!

[@abbosshodiev1699]

Straight-to-the-point tutorial. Good job!

[@overdrive112]

already the first step with the link wont work for me

[@mikson6905]

Thank you mister Cem Eygi, you saved my life

[@Chiby]

Thanks man you just solved a 3days problem for me under 5mins

[@JenniferPerez-no7ih]

Hi cem, from London, I must said that i start doing a webite, and i was struggling to find out how to cover the full page of the background with an Img, and your video just fixed my problems!!! Thank you :)

[@alizabatool1928]

i never understood from yt how to adjUst bgimg not even commented on someone channels
but i make it easy sir THANK YOU SIR! LOTS OF BLESSINGS FOR YOY SIR FROM PAKISTAN !

[@treazz6868]

Çok yardımcı oldun reis. Abimsin sevgiler...

[@onyegbulegodson168]

Thank you man
This took me hours to figure out

[@vkmuffins]

My head was about to burst until I found ur video 😖😖
Thanks thanks thanks a million times !!!!!!

[@ananyamitra8717]

I don't usually leave any comment but had to say this....thank you so much u made the perfect time saving straight to the point video ❤️

[@boriztsuyoshi9480]

Thank you i was searching for this syntax for like forever

[@sonubhardwaj9284]

finally in this video i get that individually div tag has no height and width thank you.

[@francesshakinahtinarimas523]

This help me a lot for my pt. Thank you so much for sharing this!

[@smileplease9450]

Hii
My name is John from India
Can we be friends ?

[@kamalkishor8812]

@@smileplease9450 ya why not

[@veyselaksoy3470]

Thank you. your English is so clear

[@mrssai2338]

I liked the way you explained, esp. viewport part...Great!!! subscribed already!

[@cemeygimedia]

Awesome, thank you! 👍

[@dandi2482]

thank you!! everything is sooo clear, love ya

[@kennedyjunior567]

SHORT AND CONCISE VIDEO.THANKS DO MORE VIDEOS

[@krrish7508]

Worked for me, thanks a lot!

[@fighter8931]

I solved my problem from your video. thanks a lot

[@filmbricks-stopmotion]

Tysm, this helped me so much more my project.

[@SampaChileshe-ox1jh]

Wonderfull explanation 👏👏👏

[@MattiBoustedt]

Thank you! Saved me!

[@Filderson]

Thanks bro
I have struggled for 2wks thanks 👍

[@baryalaiahmad2568]

Best way of teaching,thanks.

[@aquagamer352]

Thank you so much, i really hope this works, i have high hopes, anyways thanks for the tuto! nice explaination and everything!! :DDD

[@jayeshgaikwad3373]

Thank you man .. Really needed that one... Please make more n more....

[@ObaiAtaya-b1q]

i dont like to comment but this video really deservers the effort

[@codegen2.O]

Short, simple and to the point. Thanks!

[@matthewbarhou]

How do I add text over the image? My h1 and p elements show text but they have a white background taking up the screen horizontally

[@gunturmaulana6956]

thankyou so much mate:)
it work

[@bahauddinchishte]

This saves my day, Thanks a lot!

[@makechallengeseasy6225]

Thank you so much dear you solved my very big problem

[@quantumworld854]

great wee video - help me lots. thank you very much

[@joshuaola-oluwa7777]

Thanks for explaining well but what if i want to put the image in the body tag

[@themichael8767]

Thank You very much, Sir!)

[@STEV_-]

thank you for the knowledge🙏🙏🙏

[@fedeb2241]

Just what i was looking for, thanks!

[@shubhransubiswal5182]

Ur the best dude keep it up👍

[@irinamihai8645]

what editor are you using?

[@kiranshinde03]

A very big thank you sir...😍😊🙏

[@strycinek]

Thanks man. It was very helpful

[@redigirma]

loved it, thanks!

[@ronitbhatia1298]

Thank You for the tutorial...🙂

[@OkekeFavour-g8q]

This was really helpful

[@fitzysbaby2677]

thanks, i was using a different method which didnt like extending the image height wise, this is perfect !

[@DinithG1008]

Thanks.worked for me.!

[@swapnil72]

After doing all that can we add text over that background image??

[@indranilgoswami1500]

Thanks sir ..It helped me alot .

[@omara1091]

great job 👍

[@_Elrz]

When i put vh...image will not be display why please help me?

[@IAMHULKSUR]

Helped me out a lot. Thanks buddy.

[@rahatshahid10]

Thank you. It helped me a lot 😀

[@andrewdavidov5618]

Wow Awesome! Thanks a bunch!

[@krishnabhat9307]

thanks man you saved me:) I have a major project presentation tomorrow thanks❤❤

[@DavranbekSabirbayev]

You created a new div after that you wrote there , what about writing them in body section like body {}

[@Crosbyte]

Yup, imma just say that you're awesome teacher. Keep it going, subscribed!

[@hardikawaamin7980]

what application do you use ? thanks for answering im trying to learn

[@danielroach1019]

How do you make it so text actually goes on top of the image though, instead of below it.

[@silentt2143]

Instead of the div class, write the background-image, background-size, background-repeat, and height properties within your CSS body tag.

[@dawnstar24]

For hero image or likes, make a div, name it parent div, set it's position to relative, add any text tag and another div inside it which will contain our image. Set the image div to its maximum height and width which will be the size of the parent div and also make the position of image div to absolute, this way your text will be in middle. And you can align it using flex. Or set your text tag to absolute so you can use float or any property to set it's position. Though it's not responsive in this case so I don't really recommend it.

[@enryu9724]

Thanks for the explication

[@jeremyickes5699]

Thank you. This helped me a lot

[@yvannacello9655]

Thank you so much❤

[@Andyiinho]

Thanks, mate! This helped a lot, cheers

[@HenriethConnor-u2m]

Thank you so much.

[@Mroggg]

How can I insert a text on it and change the opcity of the background without affects the text?

[@siegfriedcrypto]

Great stuff. Thanks.

[@elgaucho956]

very usefull bro, thanks a lot

[@dxdworld3666]

thanks at this time

[@edikandesolution]

I have problem with video link . When I copied it and run . It refuse to work. I need your help

[@all-rounder0777]

Thanks sir this is very useful video

[@daane996]

VPCE É UM DEUS!!! VOU LEMBRAR DE VOCE SEMPRE QUE FOR DORMIR, ORBIAGDA!!!

[@zuhaibulhassan.]

Thank You so much man very helpful video 100% recommended video concise and straight to the point

[@elgunmhrrmov7672]

Çok teşekkür ederim Cem bey.

[@Restin_J_face]

Does it matter if the style is defined within or ?

[@DavranbekSabirbayev]

I usually write style in body section , but the most acceptable way is to write to special folder like main.css after that you should add the link to the html project

[@katta2116]

I have a question about it. When you went to mobile size, the image was showing just half. how to avoid it? like have it appear the same irrespective of whatever size the screen is?

[@programmingworld5683]

Wonderful explanation

[@codingwithshiku4735]

Thank you so much sir it helped me ❤️❤️❤️

[@أكاديميةحمزة]

perfect lesson thank u sir

[@ballagaurav5370]

thanks sir you solved my problem
thanks a lot.

[@rmdsolotov7008]

Great video. But my picture dont display after using this process. Please help

[@mariomeza3514]

Thank you very much sir

[@anniemeenie]

Thank you this was so concise and well explained!! You saved me so much time

[@Duelweb]

This was a life saver!!! Thanks!! However, the image is not responsive ?

[@barcalona55]

wow you explained it so well

[@-atlas.crosx-553]

Hello, thanks for the nice helpful vid, I'm wondering if this is doable on mobile?

[@setayishsid5296]

In which software are you coding is this video??

[@Sabeeha441]

Thank you sir 😊

[@FrannKavila]

Thank you. Is it necessary to put the width and height first? Why not go directly to?:
background-size: cover;
background-repeat: no-repeat;
height: 100vh;?

[@arijkhan9173]

Can u add the margin and padding in ur css file instead of ur html file?

[@Ig_shadowF]

thanku now i learn how to do